<template>
  <div class="detailServiceMap">
    <v-header ref="top" title="周边" :fixed="true"></v-header>
    <scroll style="height:100%">
      <div class="detailsItems">
        <grid :cols='4'>
          <grid-item
            @click.native="detailsItemsSearch(item.value)"
            v-for='(item, index) in detailServiceIcon'
            :key='index'
            style="text-align:center; color:#000; font-size:14px; display:flex; flex-direction:column;align-items:center;">
            <img :src="item.pic" alt="">
            {{item.value}}
          </grid-item>
        </grid>
      </div>

      <div class="detailsItemsEat">
        <span class="detailsItemsEatTitle">吃</span>
        <grid :cols='4'>
          <grid-item
            @click.native="detailsItemsSearch(item)"
            v-for='(item, index) in detailServiceTextEat'
            :key='index'
            style="text-align:center; color:#000; font-size:14px; display:flex; flex-direction:column;align-items:center;">
            {{item}}
          </grid-item>
        </grid>
      </div>

      <div class="detailsItemsEat">
        <span class="detailsItemsEatTitle">住</span>
        <grid :cols='4'>
          <grid-item
            @click.native="detailsItemsSearch(item)"
            v-for='(item, index) in detailServiceTextLive'
            :key='index'
            style="text-align:center; color:#000; font-size:14px; display:flex; flex-direction:column;align-items:center;">
            {{item}}
          </grid-item>
        </grid>
      </div>

      <div class="detailsItemsEat">
        <span class="detailsItemsEatTitle">购物</span>
        <grid :cols='4'>
          <grid-item
            @click.native="detailsItemsSearch(item)"
            v-for='(item, index) in detailServiceTextShopping'
            :key='index'
            style="text-align:center; color:#000; font-size:14px; display:flex; flex-direction:column;align-items:center;">
            {{item}}
          </grid-item>
        </grid>
      </div>
      <div style="height:80px"></div>
    </scroll>
    <actionsheet v-model="showMap" :menus="menusMap" :show-cancel="showCancel" @on-click-menu="handleClickMenu"></actionsheet>

    <!-- 安卓手机没有地图，提示安装 -->
    <div>
      <confirm v-model="showGaoDei"
      :title="titleMap"
      @on-cancel="onCancel"
      @on-confirm="onConfirmGaoDei">
      <p style="text-align:center;">您尚未安装常用地图，小嗨为您推荐安装高德地图</p>
      </confirm>
    </div>

  </div>
</template>

<script type='text/ecmascript-6'>
import VHeader from '@/components/v-header/v-header'
import axios from '@/api/axiosApi'
import { isIOS } from '@/assets/js/brower.js'
import { Grid, GridItem, Actionsheet, Confirm } from 'vux'
import Scroll from '@/components/scroll/scroll'

export default {
  data () {
    return {
      showMap: false,
      menusMap: {},
      showCancel: true,
      titleMap: '操作提示',
      showGaoDei: false,
      text: '',
      detailServiceIcon: [
        {
          pic: require('@/assets/img/icon/meishi.png'),
          value: '美食'
        },
        {
          pic: require('@/assets/img/icon/jingdian.png'),
          value: '景点'
        },
        {
          pic: require('@/assets/img/icon/jiudian.png'),
          value: '酒店'
        },
        {
          pic: require('@/assets/img/icon/spot_detail_service_park@3x.png'),
          value: '停车场'
        },
        {
          pic: require('@/assets/img/icon/spot_detail_service_gas@3x.png'),
          value: '加油站'
        },
        {
          pic: require('@/assets/img/icon/spot_detail_service_toilet@3x.png'),
          value: '卫生间'
        },
        {
          pic: require('@/assets/img/icon/spot_detail_service_hospital@3x.png'),
          value: '医院'
        },
        {
          pic: require('@/assets/img/icon/spot_detail_service_repair@3x.png'),
          value: '汽车维修'
        }
      ],
      detailServiceTextEat: [
        '美食',
        '小吃',
        '火锅',
        '咖啡厅',
        '肯德基'
      ],
      detailServiceTextLive: [
        '酒店',
        '宾馆',
        '青年旅社',
        '星级酒店',
        '旅馆',
        '主题酒店',
        '商务酒店',
        '快捷酒店',
        '招待所',
        '家庭旅馆'
      ],
      detailServiceTextShopping: [
        '超市',
        '商场',
        '步行街',
        '五金店',
        '便利店',
        '书店',
        '花店',
        '农贸市场'
      ],
      longitude: 0,
      latitude: 0
    }
  },
  components: {
    VHeader,
    Grid,
    GridItem,
    Scroll,
    Actionsheet,
    Confirm
  },
  methods: {
    detailsItemsSearch (content) {
      this.text = content
      if (this.$route.params.type === 0 || this.$route.params.type === '0') {
        // 景区
        axios.get(this, '/v1/scenic', {
          id: this.$route.params.id
        }, (data) => {
          if (data == null || data.length === 0) {
            return
          }
          this.longitude = data[0].longitude
          this.latitude = data[0].latitude

          this.toMap()
        })
      } else {
        // 酒店 TODO
      }
    },
    toMap() {
      if (isIOS()) {
        // 页面展示条件搜索 结果
        window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'openMapSearch', 'latitude': this.latitude, 'longitude': this.longitude, 'keywords': this.text, 'title': '周边服务'})
        // 页面跳转至导航路线
        // window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'openMapNavi', 'latitude': '26.5996600000', 'longitude': '106.6342900000'})
      } else {
        this.menusMap = JSON.parse(window.android.isInstallByread())
        if (this.menusMap == null || Object.getOwnPropertyNames(this.menusMap).length === 1) {
          this.showCancel = false
          this.showGaoDei = true
          return
        }
        if (this.menusMap.baiDu === '2') {
          this.menusMap.baiDu = '百度地图'
        }
        if (this.menusMap.gaoDei === '1') {
          this.menusMap.gaoDei = '高德地图'
        }
        if (this.menusMap.tenXun === '3') {
          this.menusMap.tenXun = '腾讯地图'
        }
        this.showMap = true
      }
    },
    onCancel () {
    },
    onConfirmGaoDei () {
      window.android.makeUpMap(this.latitude, this.longitude, '', 0, 2, '')
    },
    handleClickMenu (value) {
      if (value === 'baiDu') {
        window.android.makeUpMap(this.latitude, this.longitude, '', 2, 2, this.text)
      } else if (value === 'gaoDei') {
        window.android.makeUpMap(this.latitude, this.longitude, '', 1, 2, this.text)
      } else if (value === 'tenXun') {
        window.android.makeUpMap(this.latitude, this.longitude, '', 3, 2, this.text)
      }
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
  .detailServiceMap{
    position fixed
    top 0
    right 0
    bottom 0
    left 0
    z-index 101
    background $color-background
    .detailsItems{
      margin 70px 8px 0
      background #ffffff
      border-radius 10px
      .detailsLi{
        border 1px solid grey
        width 18%
        float left
        text-align center
      }
      img{
        width 30px
      }
    }
    .detailsItemsEat{
      padding-top 10px
      margin 10px 8px
      background #fff
      border-radius 10px
      .detailsItemsEatTitle{
        margin 10px
        padding-left 10px
        display inline-block
        font-size 18px
        font-weight bold
        border-left 4px solid $color-theme
        border-radius 2px
      }
    }
  }
</style>
